<template>
  <!---------------------- 个人中心头部 ----------------------
* @auto kyle
* @date 2020-7-28
* @inrto 个人中心头部 （主要用于个人中心，会员详情）
* @props headValue传入的值为个人中心接口获取到的值
  -->
  <div class="mt-100 bg-white plr-40 br-24 pos-r">
    <headPortrait-box
      class="img-box pos-r br-full is-120"
      :headPortraitUrl="personData.HeadPortrait"
    ></headPortrait-box>
    <!-- 头像 -->
    <level-box class="pos-a" :gradeInfo="personData.gradeInfo"></level-box>
    <!-- 等级 -->

    <div class="mt--60 tac">
      <p class="fs-28 pt-20 lh-xxs">{{personData.RealName}}</p>
      <p
        v-if="personData.InvitUserName"
        class="color-gray-light fs-24 pt-20 lh-xxs"
      >{{InvitUseTitle}}：{{personData.InvitUserName}}</p>
    </div>
    <div class="flex-s-c ptb-50">
      <div class="item-box flex-1 tac">
        <p class="fs-36 color-danger fw-600">{{personData.Balance||0}}</p>
        <p class="fs-24">消费金</p>
      </div>
      <div class="item-box flex-1 tac">
        <p class="fs-36 color-bluepurple fw-600">{{personData.Integral||0}}</p>
        <p class="fs-24">{{$IntegralAlias}}</p>
      </div>
      <div class="item-box flex-1 tac">
        <p class="fs-36 color-success fw-600">{{personData.VitalityValue||0}}</p>
        <p class="fs-24">贡献值</p>
      </div>
    </div>
  </div>
</template>

<script>
import headPortraitBox from 'components/headPortraitBox'
import levelBox from 'components/levelBox'
export default {
  name: 'personHead',
  components: {
    headPortraitBox,
    levelBox
  },
  props: {
    headValue: {
      type: Object,
      required: true,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      InvitUseTitle: '邀请人'
    }
  },
  computed: {
    personData() {
      let Obj = this.headValue,
        gradeInfo = { GradeName: Obj.GradeName, GradeLevel: Obj.GradeLevel }
      Obj.gradeInfo = gradeInfo
      if (this.headValue.MemberType === 1) {
        this.InvitUseTitle = '代理邀请人'
      }
      return Obj
    }
  }
}
</script>
<style lang="scss" scoped>
.img-box {
  margin: 0 auto;
  top: -60px;
}
.grade-box {
  top: -23px;
  left: calc(50% + 80px);
}
.item-box {
  position: relative;
  &:after {
    content: '';
    position: absolute;
    height: 50%;
    width: 0;
    border-right: 6px dotted $colorBorder;
    top: 25%;
    right: 0;
  }
  &:last-child:after {
    border-right: none;
  }
}
</style>



 